<template>
	<view class="main">
		<view class="codeimg">
			<image :src="state.imgUrl" mode="scaleToFill"></image>
		</view>
		<view class="button" v-if="state.isH5" style="background:#FFA215 url('../../static/share_bt@2x.png');background-size: 300rpx 84rpx;border-radius:32rpx" @click="fx(2)">
			<!-- -->
			去分享
		</view>
		<view class="fxtext" v-else>长按保存图片分享</view>
		<u-overlay :show="state.show" :duration="400" :z-index="999" :opacity="0.5" @click="state.show = false">
			<view class="pop">
				<view class="title">
					分享至
				</view>
				<view class="share">
					 <!-- v-if="state.iswx" -->
					<block v-for="val,index in state.list" :key="index">
						<view class="one" @click="fx(index)">
							<image :src="val.img" mode=""></image>
							<text>{{val.title}}</text>
							<button v-if="index==0" open-type="share"></button>
						</view>
					</block>
				</view>
			</view>
		</u-overlay>
	</view>
</template>
<script setup>
	import {
		reactive,ref
	} from 'vue';
	import sheep from '@/sheep';
	import {onLoad,onShow,onShareTimeline,onShareAppMessage} from '@dcloudio/uni-app';
	const state = reactive({
		show: false,
		list:[
			{
				img:'../../static/share_icon_wx@2x.png',
				title:'微信好友'
			},
			{
				img:'../../static/share_icon_wxp@2x.png',
				title:'微信朋友圈'
			},
			{
				img:'../../static/share_icon_img@2x.png',
				title:'生成图片'
			}
		],
		imgUrl:'',
		iswx:true,
		isH5:true,
	})
	onLoad(res=>{
		iswx()
		getimages()
	})
	
	onShareTimeline(()=>{
		return {
			title: '',
			imageUrl:state.imgUrl,
			query:''
		}
	})
	onShareAppMessage(()=>{
		return{
			title: '来鱼',
			imageUrl: state.imgUrl,
			path: 'pages/share/index'
		}
	})
	function iswx(){
		let port = uni.getSystemInfoSync().uniPlatform
		if(port=='app'){
			state.iswx=true
		}else{
			state.iswx=false
		}
		if(port=="web"){
			state.isH5 = false
		}else{
			state.isH5 = true
		}
	}
	async function getimages(){
		const {code,data} = await sheep.$api.zqzApi.getimg({
			token:uni.getStorageSync('token')
		})
		if(code=='1'){
			state.imgUrl = data
		}
	}
	
	function fx(index){
		console.log(index,'index')
		if(index!='2'){
			if(index=='0'){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl:state.imgUrl,
					success: function (res) {
						setjishu()
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
			if(index=='1'){
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 2,
					imageUrl: state.imgUrl,
					success: function (res) {
						setjishu()
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
		}else{
			// uni.request({
			// 	url:state.imgUrl,
			// 	responseType:'arraybuffer',
			// 	success:(res)=>{
			// 		uni.saveFile({
			// 			tempFilePath:res.tempFilePath,
			// 			success:(save) => {
			// 				console.log(save)
			// 			}
			// 		})
			// 	}
			// })
			console.log(index,'index')
			uni.downloadFile({
				url:state.imgUrl, //仅为示例，并非真实的资源
				success: (res) => {
					console.log(res.tempFilePath)
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath:res.tempFilePath,
							success() {
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								})
							},
							fail(e) {
								console.log(e)
								uni.showToast({
									title: '图片保存失败',
									icon: 'none'
								})
							}
						})
					}
				}
			});
			
				
			
			
		}
	}
	
	async function setjishu(){
		const {code,data} = await sheep.$api.zqzApi.getshared({
			token:uni.getStorageSync('token'),
		})
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;

		.main {
			height: 100%;
			width: 100%;
			background-repeat: no-repeat;
			background-size: 100% 100vh;

			// .code {
			// 	position: absolute;
			// 	top: 54%;
			// 	left: 16.4%;
			// 	margin: auto;
			// 	width: 500rpx;
			// 	height: 500rpx;
			// 	background: #FFFFFF;
			// 	box-sizing: border-box;
			// 	padding: 30rpx;

			// 	image {
			// 		width: 100%;
			// 		height: 100%;
			// 	}
			// }
			.codeimg{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			.codeimg image{width: 100%; height: 100%;}

			.button {
				position: absolute;
				top: 84.6%;
				left: 29.4%;
				margin: 32rpx auto 0;
				height: 84rpx;
				width: 300rpx;
				font-size: 32rpx;
				text-align: center;
				line-height: 64rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
				// background: url('../../static/share_bt@2x.png') center no-repeat;
				background-repeat: no-repeat;
				
			}
			.pop{
				width: 100%;
				background-color: #fff;
				position: absolute;
				bottom: 0;
				border-radius: 40rpx 40rpx 0px 0px;
				.title{
					text-align: center;
					padding: 32rpx 0;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					border-bottom: 2rpx solid #EFEFEF;
				}
				.share{
					padding: 40rpx 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.one{
						display: flex;
						position: relative;
						flex-direction: column;
						align-items: center;
						image{
							height: 100rpx;
							width: 100rpx;
						}
						text{
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #666666;
							margin-top: 16rpx;
						}
					}
					.one button{
						position: absolute;
						width: 140rpx; height: 140rpx;
						opacity: 0;
						left: 0;
						top: 0;
						z-index: 9999;
					}
				}
			}
		}
	}
	.fxtext{width: 100%; text-align: center; position: absolute; bottom: 10%;color:#FFB815}
</style>